<template>
  <div class="">
    <!-- 侧边栏返回顶部 -->
    <div class="returntop">
      <!-- 类循环 -->
      <div class="returntop-item">
        <div class="returntop-img">
          <img src="../assets/image/1.png" alt="" />
        </div>
        <div class="returntop-title">在线咨询</div>
      </div>
      <div class="returntop-item">
        <div class="returntop-img">
          <img src="../assets/image/2.png" alt="" />
        </div>
        <div class="returntop-title">联系电话</div>
      </div>
      <div class="returntop-item">
        <div class="returntop-img">
          <img src="../assets/image/3.png" alt="" />
        </div>
        <div class="returntop-title">公众号</div>
      </div>
      <div @click="returnTop" class="returntop-item">
        <div class="returntop-img">
          <img src="../assets/image/4.png" alt="" />
        </div>
        <div class="returntop-title">置顶</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 公司案例
    handleColor(index) {
      this.iscompanycaseActive = index;
    },
    // 服务体系
    handleServerColor(index) {
      this.isserverActive = index;
    },
    // 返回顶部
    returnTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共有样式
  .dflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dflex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dflex {
    display: flex;
    align-items: center;
  }
  .color-white {
    color: #fff;
  }
  .font-12 {
    font-size: 12px;
  }

  //返回顶部

  .returntop {
    position: fixed;
    z-index: 9999;
    bottom: 35px;
    right: 50px;
    width: 80px;
    padding: 0 10px;
    background: #000;
    opacity: 0.6;
    .returntop-item {
      cursor: pointer;
      padding: 20px 0 10px 0;
      color: #fff;
      border-bottom: 1px solid #fff;

      .returntop-img {
        width: 30px;
        margin: 0 auto;
      }
      .returntop-title {
        text-align-last: center;
      }
    }
    .returntop-item:last-child {
      border: none;
    }
  }
}

// 移动端
@media (max-width: 768px) {
  // 移动端共有样式
  .dflex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .font-center {
    text-align: center;
    margin-bottom: 5px;
  }
  .border-r {
    border-right: 1px solid #ccc;
  }
  .pr {
    padding-right: 10px;
  }
  .font-12 {
    font-size: 12px;
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
